<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
        text-align: center;
        line-height: 100px;
      }
      div:nth-child(2n) {
        background-color: red;
      }
    </style>
    <div id="day"></div>
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
  </head>
  <body>
    <script>
        function timeCutDown(Time) {
          //秒
          var Times = Time / 1000
          //倒计时天数
          var d = parseInt(Times / 3600 / 24)
          if (d < 10) {
            d = '0' + d
          }

          //倒计时 时间
          var h = parseInt((Times / 3600) % 24)
          if (h < 10) {
            h = '0' + h
          }

          //倒计时 分
          var m = parseInt((Times / 60) % 60)
          if (m < 10) {
            m = '0' + m
          }

          //倒计时 秒
          var s = parseInt(Times % 60)
          if (s < 10) {
            s = '0' + s
          }
          return [d, h, m, s]
        }
        var day = document.querySelector('#day')
        var hour = document.querySelector('#hour')
        var minute = document.querySelector('#minute')
        var second = document.querySelector('#second')
      //   页面刷新调用一下 渲染页面防止刷新内容会出现空白
        countDown()

        function countDown() {
          //   获取当前时间以及未来的时间
          var nowTime = +new Date()
          var fultureTime = +new Date('2020-4-30')、
          // 时间差
          var time = fultureTime - nowTime
          // 格式化时间差
          var result = timeCutDown(time)
          // 渲染页面
          day.innerHTML = result[0] + '天'
          hour.innerHTML = result[1] + '时'
          minute.innerHTML = result[2] + '分'
          second.innerHTML = result[3] + '秒'
        }
        //   定时器
        setInterval(countDown, 1000)
    </script>
  </body>
</html>
